<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="机器编号" prop="mid">
        <el-input
          v-model="queryParams.mid"
          placeholder="请输入机器编号"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="机器编号" prop="station">
        <el-input
          v-model="queryParams.station"
          placeholder="请输入机器编号"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="织轴编号" prop="zzno">
        <el-input
          v-model="queryParams.zzno"
          placeholder="请输入织轴编号"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="当前车速" prop="speed">
        <el-input
          v-model="queryParams.speed"
          placeholder="请输入当前车速"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="当前总长" prop="curlength">
        <el-input
          v-model="queryParams.curlength"
          placeholder="请输入当前总长"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="当前轴长" prop="beamlength">
        <el-input
          v-model="queryParams.beamlength"
          placeholder="请输入当前轴长"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="设定总长" prop="setlength">
        <el-input
          v-model="queryParams.setlength"
          placeholder="请输入设定总长"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="回潮率" prop="regain">
        <el-input
          v-model="queryParams.regain"
          placeholder="请输入回潮率"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="烘房温度1" prop="temp1">
        <el-input
          v-model="queryParams.temp1"
          placeholder="请输入烘房温度1"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="烘房温度2" prop="temp2">
        <el-input
          v-model="queryParams.temp2"
          placeholder="请输入烘房温度2"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="烘房温度3" prop="temp3">
        <el-input
          v-model="queryParams.temp3"
          placeholder="请输入烘房温度3"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="烘房温度4" prop="temp4">
        <el-input
          v-model="queryParams.temp4"
          placeholder="请输入烘房温度4"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="烘房温度5" prop="temp5">
        <el-input
          v-model="queryParams.temp5"
          placeholder="请输入烘房温度5"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="浆槽A温度" prop="tempa">
        <el-input
          v-model="queryParams.tempa"
          placeholder="请输入浆槽A温度"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="浆槽B温度" prop="tempb">
        <el-input
          v-model="queryParams.tempb"
          placeholder="请输入浆槽B温度"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="浆槽A压力" prop="pressurea">
        <el-input
          v-model="queryParams.pressurea"
          placeholder="请输入浆槽A压力"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="浆槽B压力" prop="pressureb">
        <el-input
          v-model="queryParams.pressureb"
          placeholder="请输入浆槽B压力"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="托纱辊压力" prop="pressuretuosha">
        <el-input
          v-model="queryParams.pressuretuosha"
          placeholder="请输入托纱辊压力"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="ZA1张力" prop="tensionza1">
        <el-input
          v-model="queryParams.tensionza1"
          placeholder="请输入ZA1张力"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="ZB1张力" prop="tensionzb1">
        <el-input
          v-model="queryParams.tensionzb1"
          placeholder="请输入ZB1张力"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="Z4张力" prop="tensionz4">
        <el-input
          v-model="queryParams.tensionz4"
          placeholder="请输入Z4张力"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="Z5张力" prop="tensionz5">
        <el-input
          v-model="queryParams.tensionz5"
          placeholder="请输入Z5张力"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="浆槽A液位" prop="yeweia">
        <el-input
          v-model="queryParams.yeweia"
          placeholder="请输入浆槽A液位"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="浆槽B液位" prop="yeweib">
        <el-input
          v-model="queryParams.yeweib"
          placeholder="请输入浆槽B液位"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="蜡槽1温度" prop="tempwax1">
        <el-input
          v-model="queryParams.tempwax1"
          placeholder="请输入蜡槽1温度"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="蜡槽2温度" prop="tempwax2">
        <el-input
          v-model="queryParams.tempwax2"
          placeholder="请输入蜡槽2温度"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="伸长Z2A" prop="stretchz2a">
        <el-input
          v-model="queryParams.stretchz2a"
          placeholder="请输入伸长Z2A"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="伸长Z3A" prop="stretchz3a">
        <el-input
          v-model="queryParams.stretchz3a"
          placeholder="请输入伸长Z3A"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="伸长Z2B" prop="stretchz2b">
        <el-input
          v-model="queryParams.stretchz2b"
          placeholder="请输入伸长Z2B"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="伸长Z3B" prop="stretchz3b">
        <el-input
          v-model="queryParams.stretchz3b"
          placeholder="请输入伸长Z3B"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="总伸长" prop="stretchtotal">
        <el-input
          v-model="queryParams.stretchtotal"
          placeholder="请输入总伸长"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="最新更新时间" prop="lastupdate">
        <el-date-picker clearable size="small"
          v-model="queryParams.lastupdate"
          type="date"
          value-format="yyyy-MM-dd"
          placeholder="选择最新更新时间">
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          v-hasPermi="['realtime:size:add']"
        >新增</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="success"
          plain
          icon="el-icon-edit"
          size="mini"
          :disabled="single"
          @click="handleUpdate"
          v-hasPermi="['realtime:size:edit']"
        >修改</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="danger"
          plain
          icon="el-icon-delete"
          size="mini"
          :disabled="multiple"
          @click="handleDelete"
          v-hasPermi="['realtime:size:remove']"
        >删除</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="el-icon-download"
          size="mini"
          :loading="exportLoading"
          @click="handleExport"
          v-hasPermi="['realtime:size:export']"
        >导出</el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="sizeList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="最新更新时间" align="center" prop="id" />
      <el-table-column label="机器编号" align="center" prop="mid" />
      <el-table-column label="机器编号" align="center" prop="station" />
      <el-table-column label="织轴编号" align="center" prop="zzno" />
      <el-table-column label="当前车速" align="center" prop="speed" />
      <el-table-column label="当前总长" align="center" prop="curlength" />
      <el-table-column label="当前轴长" align="center" prop="beamlength" />
      <el-table-column label="设定总长" align="center" prop="setlength" />
      <el-table-column label="回潮率" align="center" prop="regain" />
      <el-table-column label="烘房温度1" align="center" prop="temp1" />
      <el-table-column label="烘房温度2" align="center" prop="temp2" />
      <el-table-column label="烘房温度3" align="center" prop="temp3" />
      <el-table-column label="烘房温度4" align="center" prop="temp4" />
      <el-table-column label="烘房温度5" align="center" prop="temp5" />
      <el-table-column label="浆槽A温度" align="center" prop="tempa" />
      <el-table-column label="浆槽B温度" align="center" prop="tempb" />
      <el-table-column label="浆槽A压力" align="center" prop="pressurea" />
      <el-table-column label="浆槽B压力" align="center" prop="pressureb" />
      <el-table-column label="托纱辊压力" align="center" prop="pressuretuosha" />
      <el-table-column label="ZA1张力" align="center" prop="tensionza1" />
      <el-table-column label="ZB1张力" align="center" prop="tensionzb1" />
      <el-table-column label="Z4张力" align="center" prop="tensionz4" />
      <el-table-column label="Z5张力" align="center" prop="tensionz5" />
      <el-table-column label="浆槽A液位" align="center" prop="yeweia" />
      <el-table-column label="浆槽B液位" align="center" prop="yeweib" />
      <el-table-column label="蜡槽1温度" align="center" prop="tempwax1" />
      <el-table-column label="蜡槽2温度" align="center" prop="tempwax2" />
      <el-table-column label="伸长Z2A" align="center" prop="stretchz2a" />
      <el-table-column label="伸长Z3A" align="center" prop="stretchz3a" />
      <el-table-column label="伸长Z2B" align="center" prop="stretchz2b" />
      <el-table-column label="伸长Z3B" align="center" prop="stretchz3b" />
      <el-table-column label="总伸长" align="center" prop="stretchtotal" />
      <el-table-column label="最新更新时间" align="center" prop="lastupdate" width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.lastupdate, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
            v-hasPermi="['realtime:size:edit']"
          >修改</el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
            v-hasPermi="['realtime:size:remove']"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    
    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 添加或修改浆纱机实时数据对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="机器编号" prop="mid">
          <el-input v-model="form.mid" placeholder="请输入机器编号" />
        </el-form-item>
        <el-form-item label="机器编号" prop="station">
          <el-input v-model="form.station" placeholder="请输入机器编号" />
        </el-form-item>
        <el-form-item label="织轴编号" prop="zzno">
          <el-input v-model="form.zzno" placeholder="请输入织轴编号" />
        </el-form-item>
        <el-form-item label="当前车速" prop="speed">
          <el-input v-model="form.speed" placeholder="请输入当前车速" />
        </el-form-item>
        <el-form-item label="当前总长" prop="curlength">
          <el-input v-model="form.curlength" placeholder="请输入当前总长" />
        </el-form-item>
        <el-form-item label="当前轴长" prop="beamlength">
          <el-input v-model="form.beamlength" placeholder="请输入当前轴长" />
        </el-form-item>
        <el-form-item label="设定总长" prop="setlength">
          <el-input v-model="form.setlength" placeholder="请输入设定总长" />
        </el-form-item>
        <el-form-item label="回潮率" prop="regain">
          <el-input v-model="form.regain" placeholder="请输入回潮率" />
        </el-form-item>
        <el-form-item label="烘房温度1" prop="temp1">
          <el-input v-model="form.temp1" placeholder="请输入烘房温度1" />
        </el-form-item>
        <el-form-item label="烘房温度2" prop="temp2">
          <el-input v-model="form.temp2" placeholder="请输入烘房温度2" />
        </el-form-item>
        <el-form-item label="烘房温度3" prop="temp3">
          <el-input v-model="form.temp3" placeholder="请输入烘房温度3" />
        </el-form-item>
        <el-form-item label="烘房温度4" prop="temp4">
          <el-input v-model="form.temp4" placeholder="请输入烘房温度4" />
        </el-form-item>
        <el-form-item label="烘房温度5" prop="temp5">
          <el-input v-model="form.temp5" placeholder="请输入烘房温度5" />
        </el-form-item>
        <el-form-item label="浆槽A温度" prop="tempa">
          <el-input v-model="form.tempa" placeholder="请输入浆槽A温度" />
        </el-form-item>
        <el-form-item label="浆槽B温度" prop="tempb">
          <el-input v-model="form.tempb" placeholder="请输入浆槽B温度" />
        </el-form-item>
        <el-form-item label="浆槽A压力" prop="pressurea">
          <el-input v-model="form.pressurea" placeholder="请输入浆槽A压力" />
        </el-form-item>
        <el-form-item label="浆槽B压力" prop="pressureb">
          <el-input v-model="form.pressureb" placeholder="请输入浆槽B压力" />
        </el-form-item>
        <el-form-item label="托纱辊压力" prop="pressuretuosha">
          <el-input v-model="form.pressuretuosha" placeholder="请输入托纱辊压力" />
        </el-form-item>
        <el-form-item label="ZA1张力" prop="tensionza1">
          <el-input v-model="form.tensionza1" placeholder="请输入ZA1张力" />
        </el-form-item>
        <el-form-item label="ZB1张力" prop="tensionzb1">
          <el-input v-model="form.tensionzb1" placeholder="请输入ZB1张力" />
        </el-form-item>
        <el-form-item label="Z4张力" prop="tensionz4">
          <el-input v-model="form.tensionz4" placeholder="请输入Z4张力" />
        </el-form-item>
        <el-form-item label="Z5张力" prop="tensionz5">
          <el-input v-model="form.tensionz5" placeholder="请输入Z5张力" />
        </el-form-item>
        <el-form-item label="浆槽A液位" prop="yeweia">
          <el-input v-model="form.yeweia" placeholder="请输入浆槽A液位" />
        </el-form-item>
        <el-form-item label="浆槽B液位" prop="yeweib">
          <el-input v-model="form.yeweib" placeholder="请输入浆槽B液位" />
        </el-form-item>
        <el-form-item label="蜡槽1温度" prop="tempwax1">
          <el-input v-model="form.tempwax1" placeholder="请输入蜡槽1温度" />
        </el-form-item>
        <el-form-item label="蜡槽2温度" prop="tempwax2">
          <el-input v-model="form.tempwax2" placeholder="请输入蜡槽2温度" />
        </el-form-item>
        <el-form-item label="伸长Z2A" prop="stretchz2a">
          <el-input v-model="form.stretchz2a" placeholder="请输入伸长Z2A" />
        </el-form-item>
        <el-form-item label="伸长Z3A" prop="stretchz3a">
          <el-input v-model="form.stretchz3a" placeholder="请输入伸长Z3A" />
        </el-form-item>
        <el-form-item label="伸长Z2B" prop="stretchz2b">
          <el-input v-model="form.stretchz2b" placeholder="请输入伸长Z2B" />
        </el-form-item>
        <el-form-item label="伸长Z3B" prop="stretchz3b">
          <el-input v-model="form.stretchz3b" placeholder="请输入伸长Z3B" />
        </el-form-item>
        <el-form-item label="总伸长" prop="stretchtotal">
          <el-input v-model="form.stretchtotal" placeholder="请输入总伸长" />
        </el-form-item>
        <el-form-item label="最新更新时间" prop="lastupdate">
          <el-date-picker clearable size="small"
            v-model="form.lastupdate"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="选择最新更新时间">
          </el-date-picker>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { listSize, getSize, delSize, addSize, updateSize, exportSize } from "@/api/realtime/size";

export default {
  name: "Size",
  data() {
    return {
      // 遮罩层
      loading: true,
      // 导出遮罩层
      exportLoading: false,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 浆纱机实时数据表格数据
      sizeList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        mid: null,
        station: null,
        zzno: null,
        speed: null,
        curlength: null,
        beamlength: null,
        setlength: null,
        regain: null,
        temp1: null,
        temp2: null,
        temp3: null,
        temp4: null,
        temp5: null,
        tempa: null,
        tempb: null,
        pressurea: null,
        pressureb: null,
        pressuretuosha: null,
        tensionza1: null,
        tensionzb1: null,
        tensionz4: null,
        tensionz5: null,
        yeweia: null,
        yeweib: null,
        tempwax1: null,
        tempwax2: null,
        stretchz2a: null,
        stretchz3a: null,
        stretchz2b: null,
        stretchz3b: null,
        stretchtotal: null,
        lastupdate: null
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        mid: [
          { required: true, message: "机器编号不能为空", trigger: "blur" }
        ],
        station: [
          { required: true, message: "机器编号不能为空", trigger: "blur" }
        ],
      }
    };
  },
  created() {
    this.getList();
  },
  methods: {
    /** 查询浆纱机实时数据列表 */
    getList() {
      this.loading = true;
      listSize(this.queryParams).then(response => {
        this.sizeList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        mid: null,
        station: null,
        zzno: null,
        speed: null,
        curlength: null,
        beamlength: null,
        setlength: null,
        regain: null,
        temp1: null,
        temp2: null,
        temp3: null,
        temp4: null,
        temp5: null,
        tempa: null,
        tempb: null,
        pressurea: null,
        pressureb: null,
        pressuretuosha: null,
        tensionza1: null,
        tensionzb1: null,
        tensionz4: null,
        tensionz5: null,
        yeweia: null,
        yeweib: null,
        tempwax1: null,
        tempwax2: null,
        stretchz2a: null,
        stretchz3a: null,
        stretchz2b: null,
        stretchz3b: null,
        stretchtotal: null,
        lastupdate: null
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.single = selection.length!==1
      this.multiple = !selection.length
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "添加浆纱机实时数据";
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      const id = row.id || this.ids
      getSize(id).then(response => {
        this.form = response.data;
        this.open = true;
        this.title = "修改浆纱机实时数据";
      });
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.id != null) {
            updateSize(this.form).then(response => {
              this.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            addSize(this.form).then(response => {
              this.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id || this.ids;
      this.$confirm('是否确认删除浆纱机实时数据编号为"' + ids + '"的数据项?', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function() {
          return delSize(ids);
        }).then(() => {
          this.getList();
          this.msgSuccess("删除成功");
        }).catch(() => {});
    },
    /** 导出按钮操作 */
    handleExport() {
      const queryParams = this.queryParams;
      this.$confirm('是否确认导出所有浆纱机实时数据数据项?', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(() => {
          this.exportLoading = true;
          return exportSize(queryParams);
        }).then(response => {
          this.download(response.msg);
          this.exportLoading = false;
        }).catch(() => {});
    }
  }
};
</script>
